<template>
  <div class="umap-container">
    <div class="webgl-content">
      <div
        id="gameContainer"
        class="unity-container"
        :class="{ 'hide-canvas':loading }"
        style="width: 100vw; height: 100vh"
      ></div>
      <search class="search-wrap" :style="searchStyle" :isUnityMap="true" @sendSearchOrgId="getSearchOrgId"></search>
    </div>
  </div>
</template>

<script>
import LoadUnityLoader from '@/libs/unityMap/loadUnityLoader'
import LoadUnityProgress from '@/libs/unityMap/loadUnityProgress'
import Search from '../FMapCompt/Search'
const orgNames = [
  '金城花园',
  '黄城花园',
  '新安花园',
  '梅苑里',
  '花溪畔居',
  '天福苑',
  '徐公桥花园',
  '梅浦新村',
  '泗泾湾家园',
  '米筛巷花园',
]

export default {
  name: 'UMap',
  components: {
    Search,
  },
  data() {
    return {
      loading: true,
      active: '',
      searchStyle: { left: this.bsConfig.LeftMenu.width },
    }
  },
  computed: {
    currentMapType() {
      return this.$store.state.currentMapType
    },
    unitGroup() {
      return this.$store.state.unitGroup
    },
  },
  watch: {
    currentMapType(val) {
      // 切换地图类型时停止webgl,提升性能
      if (this.unityInstance) {
        this.unityInstance.SendMessage(
          'WebToUnity',
          'InitMap',
          val != 4 ? 'false' : 'true'
        )
      }
    },
    '$store.state.unitGroup'(val) {
      if (this.unityInstance) {
        this.updateAllMarks(val)
      }
    },
  },
  created: function () {
    window.setMarkBackgroundImage = this.setMarkBackgroundImage
    window.FunList.setMarkScoreUnity = this.setMarkScore
    window.FunList.unityFlightToMark = this.flightToMark
  },
  mounted() {},
  methods: {
    // 加载地图sdk
    init() {
      if (location.origin.indexOf('localhost') > -1) return
      if (this.unityInstance) {
        this.unityInstance.SendMessage('WebToUnity', 'FlightToMark', '')
        return
      }
      this.$Ctl.loading(1)
      LoadUnityLoader().then(() => {
        this.initWebgl()
      })
    },
    // 初始化webgl
    initWebgl() {
      this.$Ctl.loading(1)
      this.unityInstance = UnityLoader.instantiate(
        'gameContainer',
        '/ilink-fe-config/zhxf-bs/unity/Build/Release.json',
        {
          onProgress: (gameInstance, progress) => {},
        }
      )

      // 单击标签
      window.markClick = (idStr) => {}

      // 双击标签
      window.markDbClick = (idStr) => {
        this.enterFMap(idStr.split('.')[1])
      }

      // 地图加载完成
      window.mapLoaded = () => {
        this.loading = false
        this.unityInstance.SendMessage('WebToUnity', 'InitMap', 'true')
        setTimeout(() => {
          this.updateAllMarks(this.unitGroup)
        }, 2000)
        this.$Ctl.loading(0)
      }

      window.unityInstance = this.unityInstance
    },
    // 进入蜂鸟地图
    enterFMap(idStr) {
      console.log(idStr)
      let unitGroup = this.$store.state.unitGroup
      let org = unitGroup.filter((n) => {
        return n.orgName == idStr
      })[0]
      if (!org) {
        return this.$Ctl.message('该单位暂未接入', 'info')
      }
      this.$emit('goFMap', {
        markType: 34, // 单位安全指数
        param: { orgId: org.orgId },
      })
    },
    // 切换单位进入蜂鸟地图
    getSearchOrgId(orgId) {
      if (!orgId) return
      let unitGroup = this.$store.state.unitGroup
      let org = unitGroup.filter((n) => {
        return n.orgId == orgId
      })[0]
      if (!org) {
        return this.$Ctl.message('该单位暂未接入', 'info')
      }
      this.$emit('goFMap', {
        markType: 34, // 单位安全指数
        param: { orgId },
      })
    },
    // 定位到指定标签
    flightToMark(id) {
      if (!this.unityInstance) return
      this.active = id
      this.unityInstance.SendMessage('WebToUnity', 'FlightToMark', id)
    },
    // 更新地图标签
    updateMark(options, isClear, isFormHome) {
      console.log('updateMark', options)
      // 设置标签背景图和安全指数评分
    },
    // 设置标签背景图
    setMarkBackgroundImage(id, colorStr) {
      this.unityInstance.SendMessage(
        'WebToUnity',
        'SetMarkBackgroundImage',
        `${id}_${colorStr}`
      )
    },
    // 设置标签安全评分
    setMarkScore(id, score) {
      if (!this.unityInstance) return
      if (orgNames.indexOf(id) < 0) return
      let color = this.getColorByScore(score)
      this.unityInstance.SendMessage(
        'WebToUnity',
        'SetMarkScore',
        `${id}_${score}`
      )
      this.setMarkBackgroundImage(id, color)
    },
    // 批量设置标签
    updateAllMarks(data) {
      data.forEach((n) => {
        this.setMarkScore(n.orgName, n.safetyScore)
      })
    },
    // 根据分数计算颜色
    getColorByScore(val) {
      if (val < 80) return '红色'
      if (val >= 80 && val < 90) return '黄色'
      return '绿色'
    },
    // 暂停地图
    handleDestroy() {
      if (this.unityInstance) {
        this.unityInstance.SendMessage('WebToUnity', 'InitMap', 'false')
      }
    },
  },
  beforeDestroy() {
    // this.handleDestroy();
    // window.unityInstance = null;
  },
}
</script>

<style rel="stylesheet/scss" lang="scss">
.unity-container {
  background: url(../../../assets/images/fmap/fmap-bg-star.png) center no-repeat !important;
  background-size: 100% 100%;
  &.hide-canvas {
    canvas {
      opacity: 0;
    }
  }
}
.webgl-content {
  position: relative;
  .search-wrap {
    position: absolute;
    top: 40px;
    margin-left: 4%;
    z-index: 11;
  }
}
</style>